<template>
  <div class="permissions">
    <h2>权限配置</h2>
    <table>
      <thead>
        <tr>
          <th>用户名</th>
          <th>权限</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in users" :key="index">
          <td>{{ user.username }}</td>
          <td>
            <input
              v-model="user.permissions"
              type="text"
              placeholder="输入权限，用逗号分隔"
            />
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="savePermissions">保存</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Permissions',
  data() {
    return {
      users: [
        { username: 'admin', permissions: 'all' },
        { username: 'user', permissions: 'view' }
      ]
    };
  },
  methods: {
    async savePermissions() {
      try {
        await axios.post('http://localhost:5000/save-permissions', this.users, {
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`
          }
        });
        alert('权限保存成功');
      } catch (error) {
        console.error('保存权限失败', error);
        alert('保存权限失败，请重试');
      }
    }
  }
};
</script>

<style scoped>
.permissions {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #45a049;
}
</style>